<template>
    <div class="card-container">
        <n-card
              title="认证证书"
              hoverable
        >
            <div class="card-content">
                <div class="button-container">
                    <n-button
                          :disabled="!fileListLength"
                          @click="submit"
                    >
                        确认上传并验证
                    </n-button>
                </div>
                <div class="upload-container">
                    <n-upload
                          :max="1"
                          :default-upload="false"
                          ref="upload"
                          @before-upload="beforeUpload"
                          @change="handleChange"
                          :action="url"
                          @finish="handleFinish"
                    >
                        <n-upload-dragger>
                            <div style="margin-bottom: 12px;">
                                <n-icon size="50" :depth="3">
                                    <archive-icon />
                                </n-icon>
                            </div>
                            <n-text style="font-size: 16px;">
                                点击或者拖动文件到该区域
                            </n-text>
                        </n-upload-dragger>
                    </n-upload>
                </div>
            </div>
        </n-card>
    </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { ArchiveOutline as ArchiveIcon } from '@vicons/ionicons5'
import { useMessage } from 'naive-ui'

export default defineComponent({
    name: 'Verify',
    props: {
        type: {
            type: String,
            default: ''
        }
    },
    components: {
        ArchiveIcon
    },
    
    beforeRouteUpdate() {
        console.log('前一个type：' + this.type)
    },
    
    setup() {
        const uploadRef = ref(null)
        const fileListLengthRef = ref(0)
        const message = useMessage()
        return {
            upload: uploadRef,
            fileListLength: fileListLengthRef,
            handleChange({ fileList }) {
                fileListLengthRef.value = fileList.length
            },
            async beforeUpload({ file }) {
                if(file.file.type !== 'application/pdf') {
                    message.error('请上传pdf文件')
                    return false
                }
                return true
            },
            submit() {
                uploadRef.value.submit()
            },
            handleFinish({ file, event }) {
                console.log(file)
                const resp = JSON.parse(event.target.response)
                console.log(resp.data)
                if(resp.data) {
                    message.success('验证成功')
                } else {
                    message.error('验证失败')
                }
            }
        }
    },
    
    computed: {
        url() {
            return 'http://localhost:5001/api/enterprise/verify' + this.$route.params.type
        }  
    },
    
    data() {
        return {
            verifyType: this.type,
        }
    }
})
</script>

<style scoped lang="less">
.card-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    .n-card {
        margin-top: 10%;
        width: 70%;
        height: 50%;
        .card-content{
            width: 100%;
            height: 100%;
            .button-container {
                margin-bottom: 5%;
            }
        }
    }
}
</style>